<template>
  <div class="comment_item">
    <div class="comment_list_item__info">
      <div class="component-avatar">
        <router-link :to="userHref" target="_blank" data-disable_default="true">
          <img class="avatar_img" :src="props.comment.avatar" :alt="props.comment.username" />
        </router-link>
      </div>
      <div class="comment_list_item__userName">
        <span class="user__name">{{ props.comment.username }}</span>
      </div>
      <div class="comment_list_item__publishTime">{{ props.comment.createTime }}</div>
    </div>
    <div class="comment_item__details">
      <div class="comment_item_details__main">
        <div class="comment_item__text">
          <pre>{{ props.comment.commentContent }}</pre>
        </div>
        <div class="comment_item__interaction_container">
          <div class="comment_item__interaction">
            <button aria-label="5个点赞" class="comment_item__interaction__agree">
              <SvgIcon
                v-if="!props.comment.isAgree"
                class="like-icon"
                name="like"
                width="24"
                height="24"
              />
              <SvgIcon
                v-if="props.comment.isAgree"
                class="like-icon liked"
                name="liked"
                width="24"
                height="24"
              />
              <div class="comment_item__interaction__agree__count">5</div>
            </button>

            <button
              class="comment_item__interaction__reply"
              @click="isOpenReplayWriter = !isOpenReplayWriter"
            >
              回复
            </button>
            <button class="comment_item__interaction__moreReply" @click="openReplay">
              <span>展开 {{ props.comment.replayCount }} 条回复</span>
              <i v-if="!isOpenReplay" class="newFoldIcon">
                <svg
                  width="12"
                  height="13"
                  viewBox="0 0 12 13"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M2.854 5.868a.5.5 0 01.353-.853h5.586a.5.5 0 01.353.853L6.354 8.661a.5.5 0 01-.708 0L2.854 5.868z"
                    fill="#A3A7AD"
                  ></path>
                </svg>
              </i>
              <i v-if="isOpenReplay" class="newFoldIcon">
                <svg
                  width="12"
                  height="13"
                  viewBox="0 0 12 13"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M9.146 6.674a.5.5 0 01-.353.853H3.207a.5.5 0 01-.353-.853L5.646 3.88a.5.5 0 01.708 0l2.792 2.793z"
                    fill="#A3A7AD"
                  ></path>
                </svg>
              </i>
            </button>
          </div>
        </div>
      </div>
      <CommentWriter :id="props.comment.id" v-if="isOpenReplayWriter" />
      <ReplayList :id="props.comment.id" v-if="isOpenReplay" />
      <div class="hr"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import CommentWriter from './CommentWriter.vue';
  import ReplayList from './ReplayList.vue';

  const props = withDefaults(
    defineProps<{
      comment?: any;
    }>(),
    {
      comment: {
        id: 12312213,
        username: '什锦',
        avatar:
          '//sf1-cdn-tos.bdxiguastatic.com/img/user-avatar/e2580b2bb3d06dc4b805488ea57a8e0a~80x80.image',
        createTime: '2020-7-12',
        commentContent: '作者我给你99怕你多了一分，你我怕你骄傲。',
        thumbsUpCount: 5,
        replayCount: 2,
        isAgree: false,
      },
    },
  );

  const isOpenReplayWriter = ref(false);
  const isOpenReplay = ref(false);

  const openReplay = () => {
    isOpenReplay.value = !isOpenReplay.value;
  };

  const userHref = computed(() => {
    return { name: 'videoDetail', params: { id: props.comment.id } };
  });
</script>

<style lang="scss" scoped>
  .comment_item {
    margin-top: 15px;

    .comment_list_item__info {
      display: flex;
      align-items: center;

      .component-avatar {
        width: 30px;
        height: 30px;

        .avatar_img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          transition: transform 0.3s ease 0s;
          object-fit: cover;
        }
      }

      .comment_list_item__userName {
        display: flex;
        align-items: center;
        height: 22px;
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
        color: #666;
        padding-left: 10px;
      }

      .comment_list_item__publishTime {
        color: #999;
        font-size: 12px;
        line-height: 22px;
        padding-left: 10px;
      }
    }

    .comment_item__details {
      margin-left: 34px;

      .comment_item_details__main {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 6px;

        .comment_item__text {
          font-size: 15px;
          color: #1f1f1f;
          text-align: justify;
          margin-bottom: 12px;
          word-break: break-word;

          pre {
            font-family: inherit;
            white-space: pre-wrap;
            display: inline;
            line-break: anywhere;
          }
        }

        .comment_item__interaction_container {
          margin: 0;
          padding: 0;

          .comment_item__interaction {
            position: relative;
            display: flex;
            align-items: flex-start;
            color: #434e59;

            .comment_item__interaction__agree {
              display: inline-flex;
              align-items: stretch;
              cursor: pointer;
              background: none;
              border: none;
              color: #434e59; /* 默认颜色 */
              transition:
                color 0.3s ease,
                transform 0.3s ease; /* 平滑过渡 */
              padding: 0;
              height: 25px;

              svg {
                transition:
                  transform 0.3s ease,
                  fill 0.3s ease;
                width: 14px;
                height: 14px;
              }

              .comment_item__interaction__agree__count {
                padding-left: 5px;
                color: #434e59; /* 默认颜色 */
                font-size: 14px;
              }

              /* 点赞按钮的视觉反馈：按下时缩放 */
              &:active {
                transform: scale(1.1); /* 点击时图标放大 */
              }

              /* 鼠标悬停时效果 */
              &:hover {
                color: #fe3355; /* 鼠标悬停时改变颜色 */
              }
            }

            /* 添加点赞动画效果 */
            .like-icon {
              transition:
                transform 0.3s ease,
                fill 0.3s ease; /* 平滑过渡 */
              display: block;
            }

            .comment_item__interaction__reply {
              margin-right: 8px;
              cursor: pointer;
              ont-size: 14px;
            }

            .comment_item__interaction__moreReply {
              display: flex;
              align-items: center;
              cursor: pointer;
            }

            button {
              outline: none;
              border: none;
              cursor: pointer;
            }
          }
        }
      }

      .hr {
        height: 0.5px;
        background-color: rgba(12, 13, 15, 0.06);
      }
    }
  }
</style>
